<template>
  <div class="user-main-box pub-p-t-1">
    <!-- <Spin :withIcon="true" v-if="loading"></Spin> -->
    <div
      v-if="isAgent === 1"
      class="tologin normal-tologin"
      @click="goLoginSystem"
    >
      登录管理系统
    </div>
    <div class="vip-dnPush-sent">
      <div class="filter-line flx-row-s-c">
        <span class="item-name">申请状态</span>
        <span
          v-for="(item, index) in applyStatus"
          :key="item.id"
          class="select-item"
          :class="[index + 1 == applyStatusSelect ? 'active' : 'normal']"
          style="margin-right: 20px"
          @click="checkedEvent(index)"
        >
          {{ item }}
        </span>
      </div>
      <div class="listTable-area pub-m-t-10">
        <div class="filter-line search-result-line flx-row-bw-c">
          <span class="c-g f-14"
            >搜索结果共<span class="c-black"> {{ pageData.total || 0 }} </span
            >条</span
          >
        </div>
        <!-- 表格数据 -->
        <div style="overflow: hidden">
          <div class="my-domain-table">
            <Table
              :loading="loading"
              ref="pushDomianTable"
              :columns="columns"
              :data="pageData.list"
              :disabled-hover="true"
            >
              <template slot="action" slot-scope="{ row }">
                <div class="flx-row-c-c" v-if="row.status !== 2">
                  <div class="form-font-button" @click="editEvent(row)">
                    编辑
                  </div>
                  <div
                    v-if="row.status === 1 || row.status === 3"
                    class="form-font-button"
                    @click="deleteEvent(row.id)"
                  >
                    删除
                  </div>
                  <div
                    v-if="row.status === 2"
                    class="form-font-button"
                    @click="getDetails(row)"
                  >
                    申请详情
                  </div>
                  <div
                    v-if="row.status === 3"
                    class="form-font-button"
                    @click="getReason(row.reason)"
                  >
                    原因
                  </div>
                </div>
              </template>
            </Table>
          </div>
        </div>

        <!-- 空数据展示 -->
        <!-- <Empty-State
          v-if="pageData.total != null && pageData.total == 0"
          style="background-color: #fff"
          content="未搜索到任何内容！"
        ></Empty-State> -->
        <!-- 分页组件 -->
        <div
          v-if="pageData.total > 0"
          class="form-page-bottom-area flx-row-c-c"
        >
          <Page
            :total="pageData.total"
            :current="pageData.page"
            :page-size="pageData.limit"
            :page-size-opts="pageData.pageSizeOpts"
            show-elevator
            show-sizer
            show-total
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
          />
        </div>
      </div>

      <edit-apply-modal
        :show.sync="editApplyModalShow"
        :list.sync="applyList"
        :getlist="getApplyList"
      ></edit-apply-modal>
      <apply-detail-modal
        :show.sync="applyDetailModalShow"
        :info.sync="detailInfo"
      ></apply-detail-modal>
    </div>
  </div>
</template>

<script>
import { getApplyData, deleteAgent } from "@/api/user";
import { mapGetters } from "vuex";
export default {
  name: "VipMyapplicationRecode",
  components: {
    // userTabList: () => import('_c/tabList/userTabList'),
    applyDetailModal: () =>
      import("_c/modal/userModal/editApplyModal/applyDetailModal.vue"),
    editApplyModal: () =>
      import("_c/modal/userModal/editApplyModal/editApplyModal.vue"),
  },
  data() {
    return {
      loading: false,
      editApplyModalShow: false,
      applyDetailModalShow: false,
      pageData: {
        list: [],
        pageSizeOpts: [10, 15, 20],
        total: 0,
        page: 1,
        limit: 10,
      },
      applyStatus: ["待审核", "已通过", "未通过", "已删除"],
      applyStatusSelect: 1,
      isAgent: 0,
      agentAdminUrl: "",
      applyList: {},
      detailInfo: {},
      columns: [
        {
          minWidth: 50,
          title: "序号",
          type: "index",
          align: "center",
        },
        {
          minWidth: 80,
          title: "网站名称",
          key: "siteName",
          align: "center",
        },
        {
          minWidth: 100,
          title: "会员ID(手机号)",
          key: "account",
          align: "center",
        },
        {
          minWidth: 70,
          title: "姓名",
          key: "username",
          align: "center",
        },
        {
          minWidth: 100,
          title: "Email",
          key: "email",
          align: "center",
        },
        {
          minWidth: 70,
          title: "会员等级",
          key: "userLevelName",
          align: "center",
        },
        {
          minWidth: 120,
          title: "国家/地区",
          key: "action",
          align: "center",
          render: (h, params) => {
            return h(
              "span",
              params.row.country +
                "/" +
                params.row.province +
                "/" +
                params.row.city
            );
          },
        },
        {
          minWidth: 80,
          title: "申请时间",
          key: "createdTime",
          align: "center",
        },
        {
          minWidth: 60,
          title: "状态",
          key: "status",
          align: "center",
          render: (h, params) => {
            return h(
              "span",
              params.row.status == 1
                ? "待审核"
                : params.row.status == 2
                ? "已通过"
                : params.row.status == 3
                ? "未通过"
                : "已删除"
            );
          },
        },
        {
          minWidth: 100,
          title: "操作",
          align: "center",
          slot: "action",
        },
      ],
    };
  },
  head() {
    return {
      title: this.defaultTdk.title,
      meta: [
        { name: "keywords", content: this.defaultTdk.keywords },
        { name: "description", content: this.defaultTdk.description },
      ],
    };
  },
  computed: {
    ...mapGetters("app", { defaultTdk: "getDefaultTdk" }),
  },
  watch: {
    "$store.state.user.getBaseInfo": {
      handler(newValue) {
        if (newValue) {
          this.getuserInfo();
        }
      },
    },
  },
  created() {
    if (this.$store.state.user.getBaseInfo) {
      this.getuserInfo();
    }
    this.getApplyList();
  },
  methods: {
    // 获取列表数据
    async getApplyList() {
      this.loading = true;
      const params = {};
      params.page = this.pageData.page;
      params.limit = this.pageData.limit;
      params.status = this.applyStatusSelect;
      const { code, data } = await getApplyData(params);
      this.loading = false;
      if (code === 200 && data) {
        this.pageData.list = data.list;
        this.pageData.total = data.total;
      }
    },
    status(value) {
      if (value === 1) {
        return "待审核";
      }
      if (value === 2) {
        return "已通过";
      }
      if (value === 3) {
        return "未通过";
      }
      if (value === 4) {
        return "已删除";
      }
    },
    editEvent(value) {
      this.editApplyModalShow = true;
      this.applyList = value;
      this.getApplyList();
    },
    // 切换页码
    pageChange(page) {
      this.pageData.page = page;
      this.getApplyList();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageData.limit = pageSize;
      this.pageChange(1);
    },

    deleteEvent(id) {
      const data = { id };
      this.$Modal.confirm({
        title: "删除确认",
        content: "<p>确定要删除此申请吗？</p>",
        onOk: async () => {
          const res = await deleteAgent(data);
          const { code, result } = res;
          if (code === 200 && result) {
            this.$Message.success("删除成功！");
            this.getApplyList();
          }
        },
      });
    },
    getDetails(value) {
      this.applyDetailModalShow = true;
      this.detailInfo = value;
    },
    getReason(value) {
      this.$Modal.warning({
        title: "审核未通过原因",
        content: `<p>${value || "无"}</p>`,
      });
    },
    // 选择状态
    checkedEvent(val) {
      this.pageData.page = 1;
      this.pageData.limit = 10;
      this.applyStatusSelect = val + 1;
      this.getApplyList();
    },
    getuserInfo() {
      this.isAgent = this.$store.state.user.isAgent;
      this.agentAdminUrl = this.$store.state.user.agentAdminUrl;
    },
    goLoginSystem() {
      this.current = true;
      window.location.href = this.agentAdminUrl;
    },
  },
};
</script>

<style lang="scss" scoped>
.my-domain-table /deep/ {
  width: 100%;
  .form-page-bottom-area {
    border: none;
  }
  .ivu-table-wrapper {
    .ivu-table-cell {
      color: #000;
      &:nth-child(1) {
        padding-left: 10px;
        padding-right: 10px;
      }
    }
    .ivu-table-header {
      box-sizing: border-box;
    }
    .ivu-table-row {
      box-sizing: border-box;
      &:hover {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        transform: scale(1.01);
      }
    }
  }
  .tab-btn:hover {
    color: $mainColor;
    border-color: $mainColor;
  }
  .tab-btn:focus {
    box-shadow: none;
  }
  .table-domainName {
    color: $mainColor;
  }
}
.listTable-area {
  padding: 30px;
  position: relative;
  left: -60px;
  width: calc(100% + 120px);
  border-top: 20px solid #f3f6fb;
}
.user-main-box {
  position: relative;
  cursor: pointer;
  .tologin {
    position: absolute;
    left: 330px;
    top: -57px;
    display: inline-block;
    margin: 0 25px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 60px;
    border-bottom: transparent 2px solid;
    transition: border-color 0.3s, color 0.3s;
  }
  .normal-tologin {
    color: #000;

    &:hover {
      cursor: pointer;
      color: $mainColor;
    }
  }
}
</style>
